<template>
<a-modal
  :visible="show"
  :footer="null"
  :maskClosable="false"
  :keyboard="false"
  :width="680"
  :bodyStyle="{ textAlign: 'center', height: '280px', padding :'0' }"
  @cancel="close"
  centered
  forceRender
>
  <div slot="title" class="center">验证码确认</div>
  <div style="text-align: center;width:368px; margin:auto" >
    <div class="nmv-mb-10" style="margin-top: 40px">
      登录需要进行验证码确认，请通过手机接收验证码
    </div>
    <div class="nmv-mb-24 nmv-fw-550 nmv-fs-20">
      当前账户安全手机：<span class="nmv-second" >{{ phoneTxt }}</span>
    </div>
    <a-alert type="error" v-show="error" :message="error" showIcon class="nmv-mb-24" style="text-align:left"/>
    <div class="nmv-mb-10">
      <a-input ref="c1" @focus="inputFocus" @change="inputChange" v-model="data.c1" class="nmv-w-32 nmv-mr-10" :maxLength="1"/>
      <a-input ref="c2" @focus="inputFocus" @change="inputChange" v-model="data.c2" class="nmv-w-32 nmv-mr-10" :maxLength="1"/>
      <a-input ref="c3" @focus="inputFocus" @change="inputChange" v-model="data.c3" class="nmv-w-32 nmv-mr-10" :maxLength="1"/>
      <a-input ref="c4" @focus="inputFocus" @change="inputChange" v-model="data.c4" class="nmv-w-32 nmv-mr-10" :maxLength="1"/>
      <a-input ref="c5" @focus="inputFocus" @change="inputChange" v-model="data.c5" class="nmv-w-32 nmv-mr-10" :maxLength="1"/>
      <a-input ref="c6" @focus="inputFocus" @change="inputChange" v-model="data.c6" class="nmv-w-32 nmv-mr-10" :maxLength="1"/>
    </div>
    <a @click="sendMsg" :disabled="msgEnable" href="javascript:void(0)" class="nmv-second nmv-mb-24">{{msgTxt}}重新获取验证码</a>
    <a-button type="primary" class="nmv-mt-24" @click="checkCode" block>
      确定
    </a-button>
  </div>
</a-modal>
</template>

<script>

import {
  firstLoginSendMsg,
  checkCode
} from '@/services/user'

const allowKey = [
  'Digit0', 'Digit1', 'Digit2', 'Digit3', 'Digit4', 'Digit5', 'Digit6', 'Digit7', 'Digit8', 'Digit9',
  'Numpad0', 'Numpad1', 'Numpad2', 'Numpad3', 'Numpad4', 'Numpad5', 'Numpad6', 'Numpad7', 'Numpad8', 'Numpad9'
]
const backKey = 'Backspace'
const enterKey = ['Enter', 'NumpadEnter']

export default {
  computed: {
    msgTxt () {
      return this.time.timing >= 0 ? `${this.time.timing}秒后` : ''
    },
    phoneTxt () {
      if (this.data.phone) {
        let star = 3
        const among = []
        if (this.data.phone.length <= 6) {
          star = 1
        }
        for (let i = 0; i < this.data.phone.length - (star * 2); i++) among.push('*')
        return `${this.data.phone.substr(0, star)}${among.join('')}${this.data.phone.substr(-star, star)}`
      } return ''
    }
  },
  methods: {
    onkeyup (event) {
      if (this.data.code.length < 6 && allowKey.find(d => d === event.code)) {
        this.data.code.push(event.key)
      } else if (backKey === event.code) {
        this.data.code.pop()
      }
      let bit = 1
      for (let i = 1; i <= 6; i++) {
        if (this.data.code[i - 1]) {
          this.data[`c${i}`] = this.data.code[i - 1] || ''
          bit = i
        } else {
          this.data[`c${i}`] = ''
        }
      }
      if (this.$refs[`c${bit}`]) { this.$refs[`c${bit}`].focus() }
      if (this.data.code.length === 6 && enterKey.find(d => d === event.code)) {
        this.checkCode()
      }
    },
    inputChange () {
      for (let i = 1; i <= 6; i++) {
        this.data[`c${i}`] = this.data.code[i - 1] || ''
      }
    },
    inputFocus () {
      let bit = 1
      for (let i = 1; i <= 6; i++) {
        if (this.data.code[i - 1]) {
          bit = i
        }
      }
      if (this.$refs[`c${bit}`]) { this.$refs[`c${bit}`].focus() }
    },
    open (phone) {
      this.show = true
      this.$set(this.data, 'phone', phone)
      this.data.code = []
      this.error = ''
      window.onkeydown = this.onkeyup
      this.sendMsg()
      this.$nextTick(() => {
        this.$refs.c1.focus()
      })
    },
    close () {
      this.show = false
      window.onkeydown = null
    },
    async sendMsg () {
      this.msgEnable = true
      this.data.key = ''
      const res = await firstLoginSendMsg(this.data.phone)
      const { isSuccess, msg } = res
      if (isSuccess) {
        this.time.timing = 60
        this.time.id = setInterval(() => {
          this.time.timing--
          if (this.time.timing === -1) {
            clearInterval(this.time.id)
            this.msgEnable = false
          }
        }, 1000)
      } else {
        this.error = msg
        this.msgEnable = false
      }
    },
    async checkCode () {
      if (this.data.code.length === 6) {
        const res = await checkCode({
          username: this.data.phone,
          securityCode: this.data.code.join('')
        })
        const { isSuccess, msg } = res
        if (isSuccess) {
          this.$message.newFun('手机号验证成功', 'success', 3)
          this.close()
        } else {
          this.error = msg
        }
      } else {
        this.error = '请填写6位短信验证码'
      }
    }
  },
  data () {
    return {
      show: false,
      msgEnable: false,
      loginLoad: false,
      time: {
        id: undefined,
        timing: -1
      },
      data: {
        c1: '',
        c2: '',
        c3: '',
        c4: '',
        c5: '',
        c6: '',
        code: [],
        key: ''
      },
      error: ''
    }
  }
}
</script>
